<template>
	<view class="container" :style="{height: screenHeight}">
		<view class="header">
			<view class="header-title-left">欢迎来到盐池零工平台自助系统</view>
			<view class="back" @click="goBack"><uni-icons type="left" size="30"></uni-icons>返回</view>
			<view class="header-title">
				<view>招工快捷入口</view>
			</view>
		</view>
		<view class="user">
			<view class="head">
				<image class="image" :src="user.photo"></image>
			</view>

			<!-- 
			 address: data._Addr,
			 idCard: data._IDCard,
			 idCardExpirationDate: data._StartDate + ' - ' + data._EndDate,
			 issuingAuthority: data._Department,
			 nation: data._People,
			 photo: data.head,
			 userName: data._PeopleName,
			 sex: _Sex,
			 -->
			<view class="content">
				<view>姓名：{{ user.userName }}</view>
				<view>性别：{{ user.sex}}</view>
				<view>民族：{{ user.nation}}</view>
				<view>住址：{{ user.address}}</view>
				<view>身份证号：{{ user.idCard }}</view>
				<view>身份证有效期：{{ user.idCardExpirationDate }} </view>
				<view>发证机关：{{ user.issuingAuthority }}</view>
			</view>
		</view>
		<view class="form">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
				<!-- <uni-forms-item label="零活名称" required label-width="auto" label-align="center" name="gigJobName">
					<uni-easyinput v-model="baseFormData.gigJobName" placeholder="请输入" />
				</uni-forms-item>

				<uni-forms-item label="公司名称" required label-width="auto" name="companyName">
					<uni-easyinput v-model="baseFormData.companyName" placeholder="请输入公司名称，没有填个人" />
				</uni-forms-item> -->

				<uni-forms-item label="行业" required label-width="auto" name="industry">
					<template>
						<view class="age-item">
							<uni-data-select v-model="baseFormData.industry" :localdata="industryOptions" @change="industryChange"
								placeholder="请选择行业"></uni-data-select>
							<view style="width: 30px; height: 2px; background-color: #000; margin: 0 10px;"></view>
							<uni-data-select v-model="baseFormData.gigCode" :localdata="workOptions" @change="codeChange"
								placeholder="请选择工种"></uni-data-select>
						</view>
					</template>
				</uni-forms-item>

				<!-- <uni-forms-item label="行业" required label-width="auto" name="industry">
					<uni-data-select v-model="baseFormData.industry" :localdata="industryOptions"
						@change="industryChange"></uni-data-select>
				</uni-forms-item>

				<uni-forms-item label="零工分类" required label-width="auto" name="gigCode">
					<uni-data-select v-model="baseFormData.gigCode" :localdata="workOptions"
						@change="codeChange"></uni-data-select>
				</uni-forms-item> -->

				<uni-forms-item label="薪资" required label-width="auto" name="priceMin">
					<uni-easyinput v-model="baseFormData.salaryMax" placeholder="请输入薪资" @focus="keyWord()">
						<template #right>
							<view id="unit">天/元</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>


				<!-- <uni-forms-item label="薪资" required label-width="auto" name="priceMin">
					<template>
						<view class="age-item">
							<uni-easyinput v-model="baseFormData.salaryMin" placeholder="请输入" />
							<view style="width: 30px; height: 2px; background-color: #000; margin: 0 10px;"></view>
							<uni-easyinput v-model="baseFormData.salaryMax" placeholder="请输入" />
						</view>
					</template>
				</uni-forms-item> -->

				<!-- 	<uni-forms-item label="招聘人数" required label-width="auto" name="needCount">
					<uni-easyinput v-model="baseFormData.needCount" placeholder="请输入" />
				</uni-forms-item> -->

				<!-- 		<uni-forms-item label="年龄限制" label-width="auto" name="ageMin">
					<template>
						<view class="age-item">
							<uni-easyinput v-model="baseFormData.limitAgeMin" placeholder="请输入" />
							<view style="width: 30px; height: 2px; background-color: #000; margin: 0 10px;"></view>
							<uni-easyinput v-model="baseFormData.limitAgeMax" placeholder="请输入" />
						</view>
					</template>
				</uni-forms-item> -->

				<uni-forms-item label="工期" label-width="auto" name="time">
					<uni-datetime-picker type="daterange" :clear-icon="true" v-model="baseFormData.time" @maskClick="maskClick"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</uni-forms-item>

				<!-- 	<uni-forms-item label="联系电话" required label-width="auto" name="companyPhone">
					<uni-easyinput v-model="baseFormData.companyPhone" placeholder="请输入" />
				</uni-forms-item> -->

				<uni-forms-item label="工作地址" required label-width="auto" name="companyAddress">
					<!-- <uni-easyinput v-model="baseFormData.companyAddress" placeholder="请输入" /> -->
					<uni-data-picker v-model="baseFormData.companyAddress" :localdata="addressData" popup-title="请选择地区"
						@change="addressChange" @nodeclick="addressNodeClick"></uni-data-picker>
				</uni-forms-item>
				<!-- <uni-forms-item label="零工要求" label-width="auto" name="jobRequirement">
					<uni-easyinput type="textarea" v-model="baseFormData.jobRequirement" placeholder="请输入" />
				</uni-forms-item> -->


			</uni-forms>
			<Footer @click="submit('baseForm')">发布</Footer>
		</view>


		<Message />
		<!-- <button class="footer-button" @click="submit('baseForm')">发布</button> -->

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" borderRadius="10px 10px 10px 10px" class="popup">
				<view class="popup-content">
					<image class="popup-image-icon" src="../../static/images/success.png"></image>
					<view class="popup-title">
						发布成功
					</view>
					<view class="popup-buttons">
						<button style="color:#ffffff;backgroundColor:#EF7754;borderColor:none" @click="loginOut">退出登陆</button>
						<button style="color:#ffffff;backgroundColor:#4B81FF;borderColor:none" @click="look">我再看看</button>
					</view>
					<image class="popup-footer-icon" src="../../static/images/icon-left.png"></image>
				</view>
			</uni-popup>
		</view>

	</view>

</template>

<script>
	import {
		logOut
	} from '@/api/home/index';
	import {
		findNxLevel4Tree,
		findTypeCascade,
		publish
	} from '@/api/company/index.js';
	import {
		formatObjectLiteral,
		parseObjectLiteral,
	} from '../../utils/custom.js';
	import {
		findYanchixianLevel4Tree,
		findPublish,
	} from '@/api/fast/index.js';
	import {
		desensitizeChineseName,
		validateAndDesensitizeIDCard
	} from 'utils/custom.js';
	export default {
		components: {
			Message: () => import('../common/message.vue'),
			Footer: () => import('../common/bottom.vue')
		},

		onLoad() {
			this.getInit();
			this.audio();
			this.getIndustry();
			// this.getFindNxLevel4Tree();
			this.getFindYanchixianLevel4Tree();

			this.keyWord();
		},

		data() {
			return {
				screenHeight: '',
				user: {},
				user_1: {},
				tokenId: '',
				// 基础表单数据
				baseFormData: {
					photo: '',
					code: '',
					industry: '',
				},

				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				addressData: [],
				industryOptions: [],
				workOptions: [],
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					gigName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					companyName: {
						rules: [{
							required: true,
							errorMessage: '公司机构不能为空'
						}]
					},
					industry: {
						rules: [{
							required: true,
							errorMessage: '行业不能为空'
						}]
					},
					gigCode: {
						rules: [{
							required: true,
							errorMessage: '类型不能为空'
						}]
					},
					salaryMin: {
						rules: [{
							required: true,
							errorMessage: '薪资不能为空'
						}]
					},
					salaryMax: {
						rules: [{
							required: true,
							errorMessage: '薪资不能为空'
						}]
					},
					// time: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '招聘有效期不能为空'
					// 	}]
					// },
					photo: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}]
					},
					companyAddress: {
						rules: [{
							required: true,
							errorMessage: '工作地址不能为空'
						}]
					}
					// companyName: {
					//     rules: [{
					//         required: true,
					//         errorMessage: '年龄不能为空'
					//     }, {
					//         format: 'number',
					//         errorMessage: '年龄只能输入数字'
					//     }]
					// }
				},
			};
		},
		methods: {

			keyWord() {
				this.$nextTick(_ => {
					let realHeight = window.innerWidth > window.innerHeight ? window.innerWidth :
						window.innerHeight;
					console.log('realHeight', realHeight);
					this.setMetaHeight(500)
				})
			},
			// 设置meta高度 解决安卓浏览器软键盘弹起，占用窗口的面积问题
			// setMetaHeight(height) {
			// 	console.log('setMetaHeight', height);
			// 	document.head.querySelector("meta[name='viewport']").setAttribute('id', 'viewportMeta');
			// 	let metaEl = document.querySelector('#viewportMeta');
			// 	let content = `height=` + height + `,width=device-width,initial-scale=1.0,user-      
			// 	scalable = no `;
			// 	metaEl.setAttribute('name', 'viewport');
			// 	console.log('metaEl', metaEl);
			// 	console.log('content', content);
			// 	metaEl.setAttribute('content', content);
			// 	this.$forceUpdate();
			// 	console.log('metaEl', metaEl);
			// },
			setMetaHeight(height) {
				console.log('setMetaHeight', height);
				console.log('document.querySelector("body")', document.querySelector(".uni-body"));
				let body = document.querySelector(".uni-body");
				body.style.height = `${height}px !important`;
				this.$forceUpdate();
			},
			getHeight() {
				this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px';
				console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
				console.log('uni.getSystemInfoSync().windowHeight', uni.getSystemInfoSync().windowHeight);
			},
			audio() {
				let audios = uni.createInnerAudioContext();
				audios.src = require('../../static/audio/请录入招2.mp3');
				audios.play();
			},
			getInit() {
				let result = uni.getStorageSync('user');
				const name = desensitizeChineseName(result.userName);
				const {
					isValid,
					desensitizedIDCard
				} = validateAndDesensitizeIDCard(result.idCard);
				this.user = {
					...result,
					photo: `${result.photo}`,
					userName: name,
					idCard: desensitizedIDCard,
				};
			},

			//addressChange
			addressChange(e) {
				const value = e.detail.value
				const idArr = value.map((item) => item.value)
				this.baseFormData.regionProvince = idArr[0];
				this.baseFormData.regionCity = idArr[1];
				this.baseFormData.regionDistrict = idArr[2];
				this.baseFormData.regionTownship = idArr[3];
				this.baseFormData.companyAddress = idArr[0];
			},
			addressNodeClick(node) {
				console.log('node', node);
			},

			getFindNxLevel4Tree() {
				findNxLevel4Tree().then((res) => {
					console.log('data---getFindNxLevel4Tree', res.data);
					const newData = this.transformAddressData(res.data);
					console.log('newData', newData);
					this.addressData = newData
				})
			},

			getFindYanchixianLevel4Tree() {
				findYanchixianLevel4Tree().then((res) => {
					console.log('data---getFindYanchixianLevel4Tree', res.data);
					const newData = this.transformAddressData(res.data);
					console.log('newData', newData);
					this.addressData = newData
				})
			},

			transformData(data) {
				return data.map(item => {
					return {
						value: item.value,
						text: item.label,
						children: item.children ? this.transformData(item.children) : undefined
					};
				});
			},
			transformAddressData(data) {
				return data.map(item => {
					return {
						value: item.id,
						text: item.name,
						children: item.hasChild ? this.transformAddressData(item.children) : undefined
					};
				});
			},
			desensitizeChineseName(fullName) {
				// 对中文名字进行脱敏处理
				if (!fullName || fullName.length <= 1) return fullName;
				return fullName[0] + (fullName.length > 2 ? '**' : '*');
			},
			// 
			getIndustry() {
				findTypeCascade().then((res) => {
					console.log('res', res);
					const newData = this.transformData(res.data);
					console.log('newData', newData);
					this.industryOptions = newData
				})
			},

			industryChange(value) {
				console.log('value', value);
				const industry = this.industryOptions.find(item => item.value === value).children
				this.workOptions = industry
			},
			codeChange(value) {
				console.log('value', value);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			goBack() {
				uni.navigateBack()
			},

			submit(ref) {
				// code: ""
				// gigCode: "HWBY-1736330502277"
				// industry: "货物搬运"
				// limitAgeMax: "200"
				// photo: ""
				// time: [
				// 	"2025-01-14"
				// 	"2025-01-16"
				// ]

				console.log('baseFormData', this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('baseFormData', this.baseFormData);
					const data = {
						...this.baseFormData,
						beginTime: this.baseFormData.time[0],
						endTime: this.baseFormData.time[1],
					}
					delete data.companyAddress;
					console.log('data', data);

					findPublish(data).then((res) => {
						uni.setStorageSync("gigJobId", res.data.gigJobId);
						uni.$u.route({
							url: 'pages/fast/message',
						})
					})
				}).catch(err => {
					console.log('err', err);
				})

			},
			look() {
				this.$refs.popup.close()
			},
			loginOut() {
				logOut(this.tokenId).then(() => {
					uni.removeStorageSync('user');
					uni.removeStorageSync('token');
					uni.removeStorageSync('tokenId');
					uni.showToast({
						title: '退出成功'
					})
					uni.$u.route({
						url: 'pages/home/index'
					})
				})
			}
		},


	}
</script>

<style lang="less" scoped>
	/* 基础样式 */
	body,
	page {
		font-family: Arial, sans-serif;
		background-color: #f4f6fa;
		margin: 0;
		padding: 0;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-items: center;
		height: 100%;
		/* background-color: #CBE1FB; */
		/* 背景颜色 */
		background-image: url('../../static/images/background_2.png');
		/* 背景图片 */
		// background-size: cover;
		background-position: center;
		background-blend-mode: multiply;
		/* 背景混合模式，使颜色和图片叠加 */
	}

	.header {
		padding: 50px;
		width: 90%;

		.header-title-left {
			text-align: left;
			font-size: 32px;
			color: #384161;
			width: 100%;
		}

		.header-title {
			text-align: center;
			font-size: 120px;
			font-weight: 600;
			color: #4B81FF;
			width: 100%;
			margin: 100px auto 0px;
			/* 使文本居中时占据整行 */
			position: relative;
		}

		.back {
			position: absolute;
			font-size: 24px;
			color: #384161;
			line-height: 0px;
			width: 80px;
			height: 40px;
			left: 46px;
			top: 120px;
			/* 自动布局 */
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			padding: 8px 24px 8px 24px;
		}
	}

	.user {
		display: flex;
		width: 80%;

		.head {
			width: 40%;
		}

		.content {
			// width: 45%;

			view {
				padding: 20rpx;
				font-size: 22px;
				font-weight: bold;
				margin: 20rpx;
			}
		}
	}

	.form {
		position: relative;
		width: 1000px;

		.age-item {
			display: flex;
			align-items: center;

			.uni-stat__select {
				width: auto !important;
				border-radius: 4px;
			}

			.uni-easyinput {
				width: 300px !important;
			}
		}

		#unit {
			// border: 1px solid red;
			width: 10%;
			font-size: 22px;
			font-weight: bold;
		}

		::v-deep .uni-forms-item {
			// line-height: 60px;
			margin: 30px 50px;
			display: flex;
			align-items: center;
		}

		::v-deep .uni-forms-item__label {
			font-size: 26px;
			font-weight: 600;
			width: 140px !important;
			// justify-content: flex-end !important;
			color: #384161;
		}

		::v-deep .uni-forms-item__content {
			font-size: 26px;
			font-weight: 600;
			line-height: 40px;
			color: #384161;
			border-radius: 4px;
			// display: flex;
			// .input{
			// 	width: 300px;
			// }
			position: relative;

			//  输入的字体
			.uni-input-input,
			.uni-select__input-text,
			.uni-data-tree,
			.uni-textarea-textarea {
				font-size: 26px;
			}

			.uni-easyinput {
				// width: 650px;
			}

			.uni-stat__select,
			.uni-date-editor--x,
			.uni-data-tree,
			.uni-date-x {
				// width: 650px;
				height: 60px;
				background-color: #fafbfc;
			}

			.uni-select,
			.uni-date-editor--x,
			.uni-data-tree,
			.uni-date-x {
				height: 60px;
			}

			.uni-easyinput__placeholder-class,
			.placeholder,
			.uni-select__input-placeholder {
				font-size: 20px;
				color: #999;
			}

			.uni-easyinput__content-input,
			.uni-date-editor--x,
			.uni-data-tree,
			.input-value,
			.uni-date-x {
				height: 60px;
				background-color: #fafbfc;
			}

			// .text-center{
			//     color: black !important;
			// }

			.uni-icons icon-calendar uniui-calendar {
				font-size: 28px;
			}

			.uni-select__selector-item,
			.uni-date__x-input,
			.uni-data-tree,
			.input-value,
			.uni-date__x-input {
				font-size: 22px;
				color: #999;
			}

			// 日期修改样式
			.uni-calendar .uni-calendar__content {
				width: 100% !important;
				// transform: scaleY(1.2);
				height: 480px;

				.uni-calendar__header-text,
				.uni-calendar__weeks-day-text,
				.uni-calendar-item__weeks-box-text {
					font-size: 24px;
				}
			}

			// error提示信息
			.uni-forms-item__error {
				font-size: 16px;
			}


			.photo {
				display: flex;
			}

		}
	}




	.popup-content {
		height: 850px;
		width: 850px;
		padding: 50px;
		border-radius: 10px;
		text-align: center;
		background-color: #DBEAFB;
		background-image: url('../../static/images/card_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.popup-image-icon {
			width: 302px !important;
			height: 266px !important;
			margin: 150px auto 50px;
		}

		.popup-title {
			// display: flex ;
			text-align: center;
			font-size: 34px;
			font-weight: 600;
			color: #384161;
			line-height: 32px;
			margin: 0px auto 50px;
			position: relative;
		}

		.popup-buttons {
			display: flex;
			justify-content: center;
			margin-top: 200px;

			button {
				width: 200px;
				margin-left: 0;
				margin-right: 20px;
			}
		}

		.popup-image {
			width: 630px;
			border-radius: 20px;
			margin: 150px auto;
			height: 380px;
			padding: 50px 50px;
			background: linear-gradient(to bottom, #FFFFFFFF, #ECF6FEFF);
			display: flex;
			text-align: center;

			.popup-image-left {
				width: 34%;
				text-align: left;

				.title {
					font-size: 36px;
					font-weight: 600;
					line-height: 60px;
				}

				.sub-title {
					font-size: 24px;
					font-weight: 500;
					line-height: 60px;
					color: #687792;
				}

				.sub-gang {
					width: 68px;
					right: 566px;
					height: 4px;
					margin-top: 60px;
					border-radius: 16px;
					background: #d4dadf;
				}
			}

			.popup-image-right {
				margin: auto;
			}
		}

		.popup-footer-icon {
			width: 200px;
			height: 150px;
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
	}

	.footer-button {
		position: fixed;
		right: 40px;
		bottom: 20px;

		width: 120px;
		background-color: #4B81FF;
		color: #fff;
		margin-right: 0 !important;
	}

	uni-image {
		height: 405px !important;
	}
</style>